<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>案件信息页面</title>

    <link rel="stylesheet" href="../extra.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../plugins/font-awesome/css/font-awesome.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to to the body tag
to get the desired effect
|---------------------------------------------------------|
|LAYOUT OPTIONS | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition sidebar-mini">


<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="index.html" class="nav-link">主页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">联系</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <button style="font-weight: bold" type="button" class="button-pill button btn-danger"
                        onclick="logout()">
                    退出
                </button>
            </li>

            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">

            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i
                        class="fa fa-th-large"></i></a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <!--<a href="index3.html" class="brand-link">-->
        <!--<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"-->
        <!--style="opacity: .8">-->
        <!--<span class="brand-text font-weight-light">AdminLTE 3</span>-->
        <!--</a>-->

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="../../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">商户</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item ">
                        <a href="./index.html" class="nav-link">
                            <i class="nav-icon fa fa-dashboard"></i>
                            <p>
                                商品概况
                                <!--<i class="right fa fa-angle-left"></i>-->
                            </p>
                        </a>
                    </li>

                    <li class="nav-item has-treeview">
                        <a href="goinfo.html" class="nav-link active">
                            <i class="nav-icon fa fa-table"></i>
                            <p>
                                商品管理
                                <!--<i class="fa fa-angle-left right"></i>-->
                            </p>
                        </a>

                    </li>

                    <li class="nav-item has-treeview">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fa fa-table"></i>
                            <p>
                                商户管理
                                <i class="fa fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="orders.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>商户信息</p>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="updatetable.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>修改信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="orders.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>订单信息</p>
                                </a>
                            </li>
                        </ul>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">商品信息</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">主页</a></li>
                            <li class="breadcrumb-item active">案件信息</li>
                        </ol>
                        <span class="button-span float-sm-right" style="margin-right: 50px">
                            <button style="font-weight: bold" class="button button-glow button-pill btn-success"
                                    data-toggle="modal"
                                    data-target="#seeOpponentDetail"
                                    onclick="location='goinsert.html'">新增案件
                            </button>
                        </span>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <div class="card card-primary">
                            <table id="goods-table" class="table">
                            </table>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
            <!--/.card -->
            <!-- /.col -->
        </section>

    </div>
    <!-- /.content -->
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="float-right d-none d-sm-block-down">
            Anything you want
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2018 Solitary.</strong> All rights reserved.
    </footer>
</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->

<!--模态框：补货-->
<div class="modal" id="myModal1" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">x
                </button>
                <h4 class="modal-title" id="myModalLabel1"></h4>
            </div>

            <div class="modal-body">
                <h3>补货数量：</h3>
                <div style="margin-left: 30%" class="row">
                    <div class="col-6">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="minus()">-</button>
                            </span>&nbsp;
                            <input type="text" id="num" class="form-control" placeholder="1" value="1">
                            &nbsp;
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="add()">+</button></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addGood()">确定</button>
            </div>
        </div>
    </div>
</div>


<!--模态框：确认-->

<div class="modal" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 style="font-weight: bold" class="modal-title" id="myModalLabel">确认框</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">x
                </button>

            </div>
            <div class="modal-body">
                <center><h3>确定要下架吗？</h3></center>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="downStair()">确定</button>
            </div>
        </div>
    </div>
</div>


<!-- jQuery -->
<script src="../../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../../../dist/js/adminlte.js"></script>
<!-- DataTables -->
<script src="../../../plugins/datatables/jquery.dataTables.js"></script>
<script src="../../../plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- OPTIONAL SCRIPTS -->
<script src="../../../plugins/chart.js/Chart.min.js"></script>
<script src="../../../dist/js/demo.js"></script>
<script src="../../../dist/js/pages/dashboard3.js"></script>

<script>

  let user_token = sessionStorage.getItem('user_token')
  let user_uuid = sessionStorage.getItem('user_uuid')
  let table
  let good_id

  $(function () {
    refreshData()
  })


  function add() {
    let num = parseInt($('#num')
      .val())
    num++
    $('#num')
      .val(num)
  }


  function minus() {
    let num = parseInt($('#num')
      .val())
    if (num > 1) {
      num--
      $('#num')
        .val(num)
    }
    else {
      $('#num')
        .val(0)
    }
  }


  function resolveData(response) {
    return response.data
  }


  function del(id) {

    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/goods/' + id,
      'method': 'DELETE',
      'headers': {
        'Authorization': user_token
      }
    }


    $.ajax(settings)
      .done(function (response) {
        if (response.code == 0) {
          alert(response.message)
          table.destroy()
          refreshData()

        } else {
          alert(response.message)
        }
      })


  }


  function refreshData() {
    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/goods/merchant/' + user_uuid,
      'method': 'GET',
      'headers': {
        'Authorization': user_token
      }

    }

    let data = []

    $.ajax(settings)
      .done(function (response) {
        if (response.code == 0) {
          data = resolveData(response)
          table = $('#goods-table')
            .DataTable({
              destroy: true,
              data: data,
              columns: [
                {
                  'width': '30%',
                  'name': 'first'
                },
                {
                  'width': '70%',
                  'name': 'second'
                }
              ],

              columnDefs: [
                {
                  targets: 0,
                  render: function (data, type, row, meta) {
                    return '<td>\n' +
                      '                                        <div class="user-block">\n' +
                      '                                            <img class="img-circle img-bordered-sm" src="' + row.gSimg + '" onerror="this.src=\'a.png\'"\n' +
                      '                                                 alt="User Image">\n' +
                      '                                            <span class="username">\n' +
                      '                          <a href="#" >' + row.gName + '</a>\n' +
                      '                        </span>\n' +
                      '                                            <span class="description">' + row.gLabel + '</span>\n' +
                      '                                        </div>\n' +
                      '                                    </td>'

                  }
                },
                {
                  targets: 1, // 目标列位置，下标从0开始
                  render: function (data, type, row, meta) { // 返回自定义内容// return "<a href='/delete?name=" + data + "'>Delete</a>&nbsp;<a href='/update?name=" + data + "'>Update</a>";
                    return '<td>\n' +
                      '                                        <div style="margin-top: 40px;">\n' +
                      '                                            <p>' + row.gDetails + '\n' +
                      '                                            </p>\n' +
                      '                                            <div class="row">\n' +
                      '                                                <div class="col-sm-6">\n' +
                      '                                                    <span class="text-bold">价格：' + row.gPrice + 'CNY</span>&nbsp;&nbsp;&nbsp;<span\n' +
                      '                                                        class="text-bold" id="g_quantity">库存：' + row.gQuantity + '</span>&nbsp;&nbsp;&nbsp;\n' + '<span class="text-bold">状态: ' + formatState(row.gState) + '</span>\n' +
                      '                                                </div>\n' +
                      '                                                <div class="col-sm-6">\n' +
                      '                                                    <div class="btn-group-sm">\n' +
                      '                                                        <button class="btn btn-primary" data-toggle="modal"\n' +
                      '                                                                data-target="#seeOpponentDetail"\n' +
                      '                                                                onclick="doCheck(' + row.id + ')">\n' +
                      '                                                            查看\n' +
                      '                                                        </button>\n' +
                      '\n' +
                      '                                                        <button class="btn btn-info" data-toggle="modal"\n' +
                      '                                                                data-target="#seeOpponentDetail"\n' +
                      '                                                                onclick="doAlter(' + row.id + ')">\n' +
                      '                                                            修改\n' +
                      '                                                        </button>\n' +
                      '\n' +

                      '                                                    </div>\n' +
                      '                                                </div>\n' +
                      '                                            </div>\n' +
                      '                                        </div>\n' +
                      '                                    </td>'
                  }
                }
              ]
            })

        } else {

          alert(response.message)
        }
      })

  }


  function setID(id) {
    good_id = id
  }

  function downStair() {
    let form = new FormData()
    form.append('g_state', '0')

    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/goods/' + good_id,
      'method': 'POST',
      'headers': {
        'Authorization': user_token
      },
      'processData': false,
      'contentType': false,
      'mimeType': 'multipart/form-data',
      'data': form
    }


    $.ajax(settings)
      .done(function (response) {
        good_id = undefined
        response = JSON.parse(response)
        if (response.code == 0) {
          alert(response.message)
          table.destroy()
          refreshData()

        } else {
          alert(response.message)
        }
      })
  }


  function addGood() {
    let add_num = parseInt($('#num')
      .val())
    let form = new FormData()
    form.append('add_num', add_num)

    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/goods/add/' + good_id,
      'method': 'POST',
      'headers': {
        'Authorization': user_token
      },
      'processData': false,
      'contentType': false,
      'mimeType': 'multipart/form-data',
      'data': form
    }


    $.ajax(settings)
      .done(function (response) {
        good_id = undefined
        response = JSON.parse(response)
        if (response.code == 0) {
          alert(response.message)
          table.destroy()
          refreshData()

        } else {
          alert(response.message)
        }
      })
  }

  function doAlter(id) {
    sessionStorage.setItem('good_id', id)
    window.location.href = 'goInfoAlter.html'

  }

  function doCheck(id) {
    sessionStorage.setItem('good_id', id)
    window.location.href = 'goInfoCheck.html'
  }

  function logout() {
    sessionStorage.removeItem('user_token')
    window.location.href = '../common/login.html'

  }


  function formatState(state) {
    if (state == 0) {
      return '已下架'
    } else if (state == -1) {
      return '缺货'
    } else if (state == 1) {
      return '上架中'
    }
  }
</script>
</body>

</html>
